<template>
  <j-modal
    title="审批记录单"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="exportExcel"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit1 } }"
    :cancelButtonProps="{ class: { 'jee-hidden': disableSubmit1 } }"
    @cancel="handleCancel"
    cancelText="取消"
    okText="打印"
  >

    <section ref="print" id="printContent">
      <h1 style="text-align: center">审批记录单</h1>
      <!-- <a-button type="primary" @click="exportExcel" icon="download">下载</a-button> -->
      <!-- <div class="no-print" style="text-align: right">
          <a-button v-print="'#printContent'" ghost type="primary">打印</a-button>
        </div> -->
      <!-- <table border="1" height="30px" bordercolor="#D8D8D8">
          <tr>
        
            <td align="center" width="1051px">询价表</td>
          </tr>
        </table> -->
      <!-- <a-list :data-source="treeData">
        <a-list-item >
         {{ item.status }}
        </a-list-item>
      </a-list> -->

      <table border="1" height="200px" bordercolor="#999"  v-if="this.billsTemplateName == '付款申请'">
        <tr>
          <td align="center" width="400px" style="font-weight: bold;height: 40px;">审批编号</td>
          <td width="400px">{{ treeData.approvNumber }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 40px;">提交时间</td>
          <td width="400px">{{ treeData.submitTime }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 40px;">项目</td>
          <td width="400px">{{ treeData.projectName }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;height: 40px;">部门</td>
          <td width="400px">{{ treeData.departName }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 40px;">发起人</td>
          <td width="400px">{{ treeData.userName }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 40px;">职位</td>
          <td width="400px">{{ treeData.post }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;height: 40px;">开户银行</td>
          <td width="400px">{{ treeData.bankDeposit }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 40px;">银行账号</td>
          <td width="400px">{{ treeData.bankAccount }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 40px;">对方名称</td>
          <td width="400px">{{ treeData.other }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;height: 40px;">付款项目</td>
          <td width="400px">{{ treeData.paymentProject }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 40px;">合同编号</td>
          <td width="400px">{{ treeData.contract }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 40px;">付款金额</td>
          <td width="400px">{{ treeData.paymentMoney }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;height: 40px;">标题</td>
          <td align="left" colspan="5">{{ treeData.title }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" rowspan="6" style="font-weight: bold;height: 50px;">备注</td>
          <td align="left" colspan="5" rowspan="6">{{ treeData.remark }}</td>
        </tr>
      </table>
      <table border="1" height="200px" bordercolor="#999" v-if="this.billsTemplateName == '材料结算'">
        <tr>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">审批编号</td>
          <td width="400px">{{ treeData.approvNumber }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">提交时间</td>
          <td width="400px">{{ treeData.submitTime }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">项目</td>
          <td width="400px">{{ treeData.projectName }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">部门</td>
          <td width="400px">{{ treeData.departName }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">发起人</td>
          <td width="400px">{{ treeData.userName }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">职位</td>
          <td width="400px">{{ treeData.post }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;">供应商</td>
          <td width="400px">{{ treeData.supplierName }}</td>
          <td align="center" width="400px" style="font-weight: bold;">合同编号</td>
          <td width="400px">{{ treeData.contractNumber }}</td>
          <td align="center" width="400px" style="font-weight: bold;">结算时间</td>
          <td width="400px">第{{ treeData.period }}期&nbsp;{{ treeData.startTime }}-{{ treeData.endTime }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">材料项目名称</td>
          <td width="400px">{{ treeData.materialsProjectName }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">本期采购数量</td>
          <td width="400px">{{ treeData.currentPurchaseNumber }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">本期金额</td>
          <td width="400px">{{ treeData.currentMoney }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">扣款或惩罚</td>
          <td width="400px">{{ treeData.rewardAndPunish }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">本期结算金额</td>
          <td width="400px">{{ treeData.currentSettlementAmount }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">累计结算金额</td>
          <td width="400px">{{ treeData.accumulatedSettlementAmount }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;height: 40px;">标题</td>
          <td align="left" colspan="5">{{ treeData.title }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" rowspan="6" style="font-weight: bold;height: 50px;" >备注</td>
          <td align="left" colspan="5" rowspan="6">{{ treeData.remark }}</td>
        </tr>
      </table>
      <table border="1" height="200px" bordercolor="#999" v-if="this.billsTemplateName == '劳务结算'">
        <tr>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">审批编号</td>
          <td width="400px">{{ treeData.approvNumber }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">提交时间</td>
          <td width="400px">{{ treeData.submitTime }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">项目</td>
          <td width="400px">{{ treeData.projectName }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">部门</td>
          <td width="400px">{{ treeData.departName }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">发起人</td>
          <td width="400px">{{ treeData.userName }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">职位</td>
          <td width="400px">{{ treeData.post }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;">班组</td>
          <td width="400px">{{ treeData.supplierName }}</td>
          <td align="center" width="400px" style="font-weight: bold;">合同编号</td>
          <td width="400px">{{ treeData.contractNumber }}</td>
          <td align="center" width="400px" style="font-weight: bold;">结算时间</td>
          <td width="400px">第{{ treeData.period }}期&nbsp;{{ treeData.startTime }}-{{ treeData.endTime }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">结算项目</td>
          <td width="400px">{{ treeData.settlementAccount }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">本期完成量</td>
          <td width="400px">{{ treeData.currentCompletion }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">扣款或惩罚</td>
          <td width="400px">{{ treeData.rewardAndPunish }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">本期结算金额</td>
          <td width="400px">{{ treeData.currentSettlementAmount }}</td>

          <td align="center" width="400px" style="font-weight: bold;height: 30px;">累计结算金额</td>
          <td width="400px">{{ treeData.accumulatedSettlementAmount }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;height: 40px;">标题</td>
          <td align="left" colspan="5">{{ treeData.title }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" rowspan="6" style="font-weight: bold;height: 50px;">备注</td>
          <td align="left" colspan="5" rowspan="6">{{ treeData.remark }}</td>
        </tr>
      </table>
      <table border="1" height="200px" bordercolor="#999" v-if="this.billsTemplateName == '付款计划'">
        <tr>
          <td align="center" width="400px" style="font-weight: bold;">审批编号</td>
          <td width="400px">{{ treeData.approvNumber }}</td>
          <td align="center" width="400px" style="font-weight: bold;">提交时间</td>
          <td width="400px">{{ treeData.submitTime }}</td>
          <td align="center" width="400px" style="font-weight: bold;">项目</td>
          <td width="400px">{{ treeData.projectName }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;">部门</td>
          <td width="400px">{{ treeData.departName }}</td>
          <td align="center" width="400px" style="font-weight: bold;">发起人</td>
          <td width="400px">{{ treeData.userName }}</td>
          <td align="center" width="400px" style="font-weight: bold;">职位</td>
          <td width="400px">{{ treeData.post }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;">预计收款-总数</td>
          <td width="400px">{{ treeData.gatheringTotal }}</td>
          <td align="center" width="400px" style="font-weight: bold;">劳务等款项</td>
          <td width="400px">{{ treeData.gatheringPaymentServices }}</td>
          <td align="center" width="400px" style="font-weight: bold;">劳务工资</td>
          <td width="400px">{{ treeData.gatheringLaborWages }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;">下班组计划支付劳务费-总数</td>
          <td width="400px">{{ treeData.serviceFeeTotal }}</td>
          <td align="center" width="400px" style="font-weight: bold;">劳务等款项</td>
          <td width="400px">{{ treeData.serviceFeePayment }}</td>
          <td align="center" width="400px" style="font-weight: bold;">劳务工资</td>
          <td width="400px">{{ treeData.serviceFeeLaborWages }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;">计划支付材料款项-总数</td>
          <td width="400px">{{ treeData.gatheringMaterialsTotal }}</td>

          <td align="center" width="400px" style="font-weight: bold;">材料费</td>
          <td width="400px">{{ treeData.gatheringMaterialsExpense }}</td>
          <td align="center" width="400px" style="font-weight: bold;">机械费</td>
          <td width="400px">{{ treeData.gatheringMaterialsMachine }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;">其他</td>
          <td width="400px">{{ treeData.gatheringMaterialsOther }}</td>
          <td align="center" width="400px" style="font-weight: bold;">项目部直签支出</td>
          <td width="400px">{{ treeData.projectTotal }}</td>

          <td align="center" width="400px" style="font-weight: bold;">劳务费</td>
          <td width="400px">{{ treeData.projectFeePayment }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;">材料费</td>
          <td width="400px">{{ treeData.projectMaterialsExpense }}</td>
          <td align="center" width="400px" style="font-weight: bold;">机械费</td>
          <td width="400px">{{ treeData.projectMachineryCost }}</td>
          <td align="center" width="400px" style="font-weight: bold;">其他</td>
          <td width="400px">{{ treeData.projectOther }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;">项目部预留备用资金</td>
          <td width="400px" colspan="5">{{ treeData.projectReservedMoney }}</td>
        </tr>

        <tr>
          <td align="center" width="400px" style="font-weight: bold;">标题</td>
          <td align="left" colspan="5">{{ treeData.title }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" rowspan="6" style="font-weight: bold;">备注</td>
          <td align="left" colspan="5" rowspan="6">{{ treeData.remark }}</td>
        </tr>
      </table>
      
      
      <table border="1" height="200px" bordercolor="#999" v-if="this.billsTemplateName == '工程项目合同审批'">
        <tr>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">审批编号</td>
          <td width="400px">{{ treeData.approvNumber }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">提交时间</td>
          <td width="400px">{{ treeData.submitTime }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">发起人</td>
          <td width="400px">{{ treeData.userName }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">职位</td>
          <td width="400px">{{ treeData.post }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">申请部门</td>
          <td width="400px">{{ treeData.departName }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">开始日期</td>
          <td width="400px">{{ treeData.startTime }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;">项目</td>
          <td width="400px">{{ treeData.projectName }}</td>
          <td align="center" width="400px" style="font-weight: bold;">合同名称</td>
          <td width="400px">{{ treeData.name }}</td>
          <td align="center" width="400px" style="font-weight: bold;">合同期限</td>
          <td width="400px">{{ treeData.deadline }}个月</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">合同份数</td>
          <td width="400px">{{ treeData.number }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">合同金额</td>
          <td width="400px">{{ treeData.money }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">合同编号</td>
          <td width="400px">{{ treeData.contractNumber }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">对方单位名称</td>
          <td width="400px">{{ treeData.other }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">对方单位地址</td>
          <td width="400px">{{ treeData.otherAddress }}</td>
          <td align="center" width="400px" style="font-weight: bold;height: 30px;">对方单位电话</td>
          <td width="400px">{{ treeData.otherPhone }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" style="font-weight: bold;height: 40px;">标题</td>
          <td align="left" colspan="5">{{ treeData.title }}</td>
        </tr>
        <tr>
          <td align="center" width="400px" rowspan="6" style="font-weight: bold;height: 50px;">备注</td>
          <td align="left" colspan="5" rowspan="6">{{ treeData.remark }}</td>
        </tr>
      </table>
      
      <div style="display: inline-block;" v-for="(item, index) in list" :key="index">
        <table border="1" height="70px" bordercolor="#999">
          <tr>
            <td align="center" width="70px"  >审批部门</td>
            <td width="100px" align="center" >{{ item.departName }}</td>
            <td align="center" width="65px">审批人</td>
            <td width="60px" align="center" >{{ item.realname }}</td>
            <td align="center" width="67px">审批时间</td>
            <td width="160px">{{ item.updateTime }}</td>
          </tr>
          <tr>
            <td align="center" width="50px" >意见</td>
            <td width="100px"  colspan="3">{{ item.feedback }}</td>

            <td align="center" width="50px">签字</td>
            <td width="110px"><img
            :src="item.signature"
            height="60px"
            alt=""
            preview="2"
            style="max-width: 110px; font-size: 16px; font-style: italic"
          /></td>
          </tr>
        </table>
      </div>
      <!-- <div style="display: inline-block">
        <table border="1" height="120px" bordercolor="#D8D8D8">
          <tr>
            <td align="center" width="60px">审批部门</td>
            <td width="100px"></td>
            <td align="center" width="50px">审批人</td>
            <td width="100px"></td>
            <td align="center" width="60px">审批时间</td>
            <td width="110px"></td>
          </tr>
          <tr>
            <td align="center" width="50px">意见</td>
            <td width="100px" colspan="3"></td>
      
            <td align="center" width="50px">签字</td>
            <td width="110px"></td>
          </tr>
     
        </table>
      </div> -->

      <!-- <div style="display: inline-block">
        <table border="1" height="120px" bordercolor="#D8D8D8">
          <tr>
            <td align="center" width="60px">审批部门</td>
            <td width="100px"></td>
            <td align="center" width="50px">审批人</td>
            <td width="100px"></td>
            <td align="center" width="60px">审批时间</td>
            <td width="110px"></td>
          </tr>
          <tr>
            <td align="center" width="50px">意见</td>
            <td width="100px" colspan="3"></td>
        
            <td align="center" width="50px">签字</td>
            <td width="110px"></td>
          </tr>
       
        </table>
      </div> -->

      <!-- <div style="display: inline-block">
        <table border="1" height="120px" bordercolor="#D8D8D8">
          <tr>
            <td align="center" width="60px">审批部门</td>
            <td width="100px"></td>
            <td align="center" width="50px">审批人</td>
            <td width="100px"></td>
            <td align="center" width="60px">审批时间</td>
            <td width="110px"></td>
          </tr>
          <tr>
            <td align="center" width="50px">意见</td>
            <td width="100px" colspan="3"></td>
      
            <td align="center" width="50px">签字</td>
            <td width="110px"></td>
          </tr>
       
        </table>
      </div> -->
      <!-- <div style="display: inline-block">
        <table border="1" height="120px" bordercolor="#D8D8D8">
          <tr>
            <td align="center" width="60px">审批部门</td>
            <td width="100px"></td>
            <td align="center" width="50px">审批人</td>
            <td width="100px"></td>
            <td align="center" width="60px">审批时间</td>
            <td width="110px"></td>
          </tr>
          <tr>
            <td align="center" width="50px">意见</td>
            <td width="100px" colspan="3"></td>
        
            <td align="center" width="50px">签字</td>
            <td width="110px"></td>
          </tr>
       
        </table>
      </div> -->
      <!-- <div style="display: inline-block">
        <table border="1" height="120px" bordercolor="#D8D8D8">
          <tr>
            <td align="center" width="60px">审批部门</td>
            <td width="100px"></td>
            <td align="center" width="50px">审批人</td>
            <td width="100px"></td>
            <td align="center" width="60px">审批时间</td>
            <td width="110px"></td>
          </tr>
          <tr>
            <td align="center" width="50px">意见</td>
            <td width="100px" colspan="3"></td>
            <td align="center" width="50px">签字</td>
            <td width="110px"></td>
          </tr>
        
        </table>
      </div> -->
    </section>
    <div class="no-print" style="display: inline-block; width: 100%; text-align: right">
      <a-button ghost type="primary" right @click="handleCancel">取消</a-button>
  <!-- <a-button @click="handleClickDownloadFile"><a-icon type="download"/>&nbsp;下载</a-button> -->

      <a-button v-print="'#printContent'" style="margin-left: 20px" type="primary">打印</a-button>
    </div>
  </j-modal>
</template>

<script>
import ExcelJS from 'exceljs'
import { saveAs } from 'file-saver'
import { httpAction, getAction } from '@api/manage'

//  import { mixinDevice } from '@/utils/mixin'
// import { JeecgListMixin } from '@/mixins/JeecgListMixin'
//  item.supplierName, supplierPriceItem.publicBiddingName
const renderContent = (value, row, index) => {
  const obj = {
    children: value,
    attrs: {},
  }

  // console.log(value)
  // console.log(row)
  // console.log(index)

  if (index === 1) {
    obj.attrs.rowSpan = 2
  }

  // These two are merged into above cell
  if (index === 2) {
    obj.attrs.rowSpan = 0
  }

  return obj
}

import Bus from './bus'
export default {
  name: 'huiqian',
  // mixins: [JeecgListMixin, mixinDevice],
  props: {
    value: Boolean,
  },
  components: {},
  data() {
    return {
      title: '发标',
      id: '',
      width: 1300,
      visible: false,
      disableSubmit1: true,
      confirmLoading: false,
      profitabilityAnalysis: '',
      remark: '',
      loading: false,
      billsTemplateName: '',
      list: [],
      treeData: [],
      url: {
        list: '/bidding/wtBiddingSupplier/list',
      },
    }
  },
  computed: {},
  methods: {
    edit(record) {
      this.visible = true
      this.loadTree(record)
      // console.log('ewq', record)
      this.billsTemplateName = record.billsTemplateName
      // console.log('dewq', this.billsTemplateName)
    },
    loadTree(record) {
      var that = this
      let id = '';
      if(!!record){
        id = record.id
      }
      getAction(`/countersign/wtCountersign/getPintPreviewData?id=${id}`).then((res) => {
        // console.log(res.result);
        if (res.success) {
          // console.log(res)
          that.treeData = res.result.wtCountersignDetail
          // console.log('ew', that.treeData)
          that.list = res.result.list
        }
      })
    },
    add() {
      this.visible = true
    },

    close() {
      this.$emit('close')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
  },
}
</script>
<style scoped>
.div1 {
  width: 100%;
  text-align: center;
  font-size: 16px;
}
/*update_begin author:scott date:20191203 for:打印机打印的字体模糊问题 */
* {
  color: #000000 !important;
  -webkit-tap-highlight-color: #000000 !important;
}
/*update_end author:scott date:20191203 for:打印机打印的字体模糊问题 */

.abcdefg .ant-card-body {
  margin-left: 0%;
  margin-right: 0%;
  margin-bottom: 1%;
  border: 0px solid black;
  min-width: 800px;
  color: #000000 !important;
}
.explain {
  text-align: left;
  margin-left: 50px;
  color: #000000 !important;
}
.explain .ant-input,
.sign .ant-input {
  font-weight: bolder;
  text-align: center;
  border-left-width: 0px !important;
  border-top-width: 0px !important;
  border-right-width: 0px !important;
}
.explain div {
  margin-bottom: 10px;
}
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>